<template>
	<div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column fixed prop="id" label="编号" width="120"></el-table-column>
			<el-table-column prop="name" label="图书名称" width="140"></el-table-column>
			<el-table-column prop="author" label="作者" width="140"></el-table-column>
			<el-table-column prop="publish" label="出版社" width="300"></el-table-column>
			<el-table-column prop="pages" label="页数" width="100"></el-table-column>
			<el-table-column prop="price" label="价格" width="120"></el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
					<el-button @click="deleteById(scope.row)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination 
			background 
			layout="prev, pager, next" 
			:page-size="size" 
			:total="total" 
			@current-change="page">
		</el-pagination>
	</div>
</template>

<script>
export default {
	data() {
		return {
			total: null,
			size:null,
			tableData: [],
		};
	},
	created() {
		this.getBookList()
	},
	methods: {
		deleteById(row){
			axios.delete('http://localhost:8888/book/deleteById/'+row.id).then(result=>{
				this.$alert('《'+row.name+'》删除成功！', '消息', {
					confirmButtonText: '确定',
					callback: action => {
						window.location.reload()
					}
				})
			})
		},
		edit(row) {
			//两种方法都是传id的，第一种相对好点
			this.$router.push({
				path:'/bookUpdate',
				query:{
					id:row.id
				}
			})
			// this.$router.push('/bookUpdate/'+row.id)
		},
		page(currentPage) {
			axios.get('http://localhost:8888/book/findAll/' + (currentPage-1) + '/5').then(result => {
				this.tableData = result.data.content;
				this.size=result.data.size;
				this.total = result.data.totalElements;
			});
		},
		getBookList(){
			axios.get('http://localhost:8888/book/findAll/0/5').then(result => {
				this.tableData = result.data.content;
				this.size=result.data.size;
				this.total = result.data.totalElements;
			});
		}
	}
};
</script>
